<template>
	<view class="container">
		<view class="font-s-15">
			<view class="out-v">
				<view class="width-75"><text class="color-r">*</text>昵称</view>
				<view class="inline-v"><input class="uni-input" v-model="nickname" placeholder-style="font-size:12px;" placeholder="请输入昵称" /></view>
			</view>
			<view class="out-v">
				<view class="width-75"><text class="color-r">*</text>性别</view>
				<view class="inline-v" style="justify-content: flex-end;padding-right: 74rpx;">
					<uni-data-select v-model="sex" :clear="false" :placeholder="_selectPlace1" :localdata="sex_range"></uni-data-select>
				</view>
			</view>
			<view class="out-v">
				<view class="width-75"><text class="color-r">*</text>年龄区间</view>
				<view class="inline-v" style="justify-content: flex-end;padding-right: 74rpx;">
					<uni-data-select v-model="age" :clear="false" :placeholder="_selectPlace2" :localdata="age_range"></uni-data-select>
				</view>
			</view>
			<view class="out-v">
				<view class="width-75"><text class="color-r">*</text>联系电话</view>
				<view class="inline-v"><input class="uni-input" v-model="contact" placeholder-style="font-size:24rpx;" placeholder="请输入联系电话" /></view>
			</view>
			<view class="out-v">
				<view class="width-75"><text class="color-r">*</text>居住区域</view>
				<view class="inline-v"><input class="uni-input" v-model="address" placeholder-style="font-size:24rpx;" placeholder="请输入居住区域" /></view>
			</view>
		<!-- 	<view class="out-v" style="display: block;height: 300rpx;">
				<view>
					<textarea placeholder="（非必填）请输入想提升哪些技能" v-model="remark" maxlength=150 placeholder-style="font-size:24rpx"></textarea>
				</view>
			</view> -->
			<view class="out-v btn" @click="baoming()" :disabled="disbaoming">
				提交报名
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {
		
		data() {
			return {
				disbaoming: false,
				course_id:0,
				campus_id:0,
				nickname:'',
				contact:'',
				address:'',
				// remark:'',
				_selectPlace1:'请选择',
				_selectPlace2:'请选择',
				age:'',
				age_range:[
					{text:'17岁及以下',value:'17岁及以下'},
					{text:'18~25岁',value:'18~25岁'},
					{text:'26~35岁',value:'26~35岁'},
					{text:'36~45岁',value:'36~45岁'},
					{text:'46~55岁',value:'46~55岁'},
					{text:'56岁及以上',value:'56岁及以上'}
				],
				sex:'',
				sex_range:[
					{text:'男',value:1},
					{text:'女',value:2},
				],
				sub_message_list:[]
			}
		},
		
		onLoad(option) {
			this.course_id =option.id;
			// this.course_id=2;
			this.campus_id = option.campus_id;
			// this.campus_id=23428
			this.getPreInfo();
			this.getSubMessage();
		},
		methods: {
			async getPreInfo(){
				let params ={}
				let data = await Api.apiCall('get', Api.apiName.course_order_first, params);
				if (!data || Object.keys(data.data).length === 0) { //出错时
					return;
				}
				
				let res = data.data;
				this.nickname = res.nickname;
				this.age = res.age;
				this.sex = res.sex;
				this.contact = res.contact;
				this.address = res.address;
				// this.remark = res.remark;
			},
			async baoming(){
				let phoneReg =/^1[1-9][0-9]\d{8}$/;
				try{
					if(this.nickname==''){ throw '请填写昵称';}
					if(this.sex==''){ throw '请选择性别';}
					if(this.age==''){ throw '请选择年龄';}
					if(this.contact==''){ throw '请填写手机号';}
					if(this.address==''){ throw '请填写居住区域';}
					if(!phoneReg.test(this.contact)){ throw '手机号格式有误';}
				}catch(err){
					this.$api.msg(err);
					return;
				}
				this.disbaoming = true;
				let that = this;
				uni.showModal({
					title:'确认报名该课程?',
				    content: '若报名人数已满时，系统将自动为您预约排队候补',
				    success: async (e)=>{
				    	if(e.confirm){
				    		let params = {
				    			course_id: that.course_id,
								campus_id:that.campus_id,
								nickname:that.nickname,
								sex:that.sex,
								age:that.age,
								contact:that.contact,
								address:that.address,
								// remark:that.remark
				    		}
				    		let data = await Api.apiCall('post', Api.apiName.course_order_create, params);
							that.disbaoming =false;
							if (!data) { //出错时
								return;
							}
							
							that.openModalMessage()
							
							// return;
							uni.navigateTo({
								url:'/pages/course/feedback?status='+data.data.status+'&c_id='+that.course_id
							})
				    	}
				    }
				});
			},
			openModalMessage(){
				let that = this;
				uni.requestSubscribeMessage({
					tmplIds:that.sub_message_list,
				})
			},
			async getSubMessage(){
				let data = await Api.apiCall('get', Api.apiName.sub_message_list, {type:'bm'},true);
				if (!data || data.data.length === 0) { //出错时或者没有数据
					return;
				}
				this.sub_message_list=data.data;
			},
		},


	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.container {
		
	}
	.font-s-15{
		font-size: 30rpx;
	}
	.width-75{
		width: 150rpx;
	}
	.color-r{
		color: #FF0000;
	}
	.out-v{
		margin: 30rpx;
		// border: 1px solid red;
		height: 80rpx;
		line-height: 80rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding-left: 40rpx;
		display: flex;
	}
	.inline-v{
		text-align: right;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.uni-select{
		border: none !important;
		width: 200rpx !important;
	}
	.uni-icons{
		padding-left: 10rpx;
	}
	.uni-select__input-placeholder{
		color:#999999 !important;
	}
	.uni-select__selector{
		left: 80rpx !important;
	}
	.btn{
		text-align: center;
		display: block;
		background: #0191FF;
		color:#FFFFFF;
	}
</style>